<?xml version="1.0"?>

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
  <html>
  <head>
  	<title>Uppgift 1</title>
  	<link rel="Stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
  	<table>
  	<tr>
  		<th>Sorterat på pris</th>
  		<th>Sorterat på namn</th>
  	</tr>
  	<tr>
  		<td>
  			<div class="box">
  				<h4>Produkter för 10 kronor och billigare</h4>
	  			<xsl:apply-templates select="//produkt[./pris &lt; 10]" />
  			</div>

  			<div class="box">
  				<h4>Produkter mellan 11 och 19 kronor</h4>
	  			<xsl:apply-templates select="//produkt[./pris > 10 and ./pris &lt; 20]" />
			</div>

  			<div class="box">
  				<h4>Produkter för 20 kronor och dyrare</h4>
	  			<xsl:apply-templates select="//produkt[./pris > 20]" />
	  		</div>
  		</td>
  		
  		<td>
  			<div class="box">
	  			<xsl:apply-templates select="//produkt">
  					<xsl:sort select="produktnamn" />
  				</xsl:apply-templates>
  			</div>
  		</td>
  	</tr>
  	
  	</table>
  </body>
  </html>
</xsl:template>

<xsl:template match="produkt">
	<xsl:choose>
		<xsl:when test="position() mod 2 = 0">
	 		<div class="stripe">
				<xsl:value-of select="produktnamn" />
				<span class="right">
					<xsl:value-of select="pris" />
				</span>
	</div>
	 	</xsl:when>
	 	<xsl:otherwise>
	 		<div>
				<xsl:value-of select="produktnamn" />
				<span class="right">
					<xsl:value-of select="pris" />
				</span>
			</div>
	 	</xsl:otherwise>
	</xsl:choose>
</xsl:template>

</xsl:stylesheet>